<template>
  <div id="home">
    <NavBar class="home-nav">
      <div slot="center">购物街</div>
    </NavBar>

    <scroll class="content" ref="scroll">
      <home-swiper :banners="banners"></home-swiper>
      <home-recommend-view :recommends="recommends"></home-recommend-view>
      <feature-view></feature-view>


      <tab-control :titles="['流行','新款','精选']" class="tab-control" @tabClick="tabClick"/>
      <goods-list :goods="goods[currentType].list"></goods-list>
    </scroll>
    <back-top @click.native="backClick"/>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar";
import TabControl from "../../components/common/tabControl/TabControl";
import GoodsList from "../../components/content/goods/GoodsList";
import Scroll from "../../components/common/scroll/Scroll";
import BackTop from "../../components/common/backTop/BackTop";


import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommendView from "./childComps/HomeRecommendView";
import FeatureView from "./childComps/FeatureView";

import {getHomeMultidata, getHomeGoods} from "../../network/home";                   /*只有用default导出才能没有大括号*/


export default {
  name: "Home",
  components: {
    HomeSwiper,
    HomeRecommendView,
    FeatureView,
    Scroll,
    BackTop,
    NavBar,
    TabControl,
    GoodsList
  },
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page: 0, list: []}
      },
      currentType: 'pop'
    }
  },
  created() {
    this.GetHomeMultidata()                          /*调用下面methods中的GetHomeMultidata*/


    this.GetHomeGoods('pop')
    this.GetHomeGoods('new')
    this.GetHomeGoods('sell')
  },
  methods: {
    /*事件监听相关方法*/
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
    },
    backClick() {
      this.$refs.scroll.scroll.scrollTo(0, 0, 500)
    },


    /*网络请求相关的方法*/
    GetHomeMultidata() {
      getHomeMultidata().then(res => {
        // this.result = res
        // console.log(res)
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
      })
    },
    GetHomeGoods(type) {
      const page = this.goods[type].page + 1     /*例如下拉加载时*/
      getHomeGoods(type, page).then(res => {
        // console.log(res)
        // this.goods[type].list = this.goods[type].list.concat(res.data.list)       /*concat是合并返回新的数组，理论上也可以用,但是concat不是数组的响应式方法*/
        this.goods[type].list.push(...res.data.list)         /*用...来解析res.data.list中请求来的数据，并且一个一个push进一个空的数组中*/
        this.goods[type].page += 1               /*不要忘记上面的数据的page在请求完后要加1*/
      })
    }
  }
}
</script>

<style scoped>
#home {
  padding-top: 44px;
  height: 100vh; /*视口长度*/
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

.tab-control { /*因为tabControl这组件在其他地方使用不一定要粘住，所以就来home里面的进行修改*/
  position: sticky; /*兼容性差！！！！！*/
  top: 44px;
  z-index: 8;
}

.content {
  height: calc(100% - 55px);
}
</style>
